<template>
    <div>
 
     
      <el-date-picker
      value-format="yyyy-MM-dd"
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions" style="height: 38px;">
    </el-date-picker>
    <el-button class="el-icon-magic-stick"type="info" size="medium"  @click="cx"  >查询</el-button>
     <!-- <el-divider content-position="left">订单报表</el-divider> -->
    <!--  <el-input  v-model="name"  style="width:200px;" @input="search()" placeholder="请输入内容"></el-input><el-button class="el-icon-magic-stick"type="success" size="medium" @click="dialogFormVisible = true" >查询</el-button> -->
     <!-- <el-divider><i class="el-icon-mobile-phone"></i></el-divider> -->
     <el-dialog append-to-body title="订单详情" :visible.sync="dialogFormVisible1" >
      <xinq :xian.sync="dialogFormVisible1" :shuju1="dd"></xinq>
    </el-dialog>
 
     <el-table :data="pder"  style="width:100%" @selection-change="handleSelectionChange">
           
           <el-table-column prop="Pbh" label="订单编号" width="150"></el-table-column>
           <!-- <el-table-column prop="Path" label="头像" width="80">
                     <template #default="{ row }">
                         <el-avatar :src="baseImg + row.Path"></el-avatar>
                     </template>
           </el-table-column> -->
           <el-table-column prop="UserName" label="姓名" width="100"></el-table-column>
           <el-table-column prop="Phone" label="手机号码" width="120"></el-table-column>
           <!-- <el-table-column prop="Sex" label="性别" width="60"></el-table-column> -->
           <el-table-column prop="Pdata" label="下单日期" width="120">
                     <template #default="{ row }">
                      <i class="el-icon-time"></i>
                         {{ row.Pdata.substr(0, 10) }}
                     </template>
           </el-table-column>
               
                 <el-table-column prop="dizhi" label="下单地址" width="150">

                 </el-table-column>
                 <el-table-column prop="Price" label="交易金额" width="100">
                  <template #default="{ row }">
                     
                         {{ row.Price|zz}}
                     </template>
                 </el-table-column>
                 <el-table-column prop="Ptype" label="取餐方式" width="100">
                  <template #default="{ row }">
                     
                         {{ row.Ptype==1?"自取":"外卖"}}
                     </template>
                 </el-table-column>
                 <el-table-column prop="Ptype" label="交易状态" width="100">
                  <template #default="{ row }">
                     
                         {{ row.zt==4?"完成":"取消"}}
                     </template>
                 </el-table-column>
                <!--  <el-table-column prop="Status" label="状态" width="120">
                     <template #default="{ row }">
                         <el-switch disabled v-model="row.Status" active-color="#13ce66" inactive-color="#ff4949">
                         </el-switch>
                     </template>
                 </el-table-column> -->
          <!--  <el-table-column label="操作">
             <template slot-scope="scope">
               
                 <el-button type="warning" class="el-icon-search"  @click="xg(scope.row)" size="mini">详情</el-button>
             </template>
           </el-table-column> -->
           <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="name"
          @input="search()"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="xg(scope.row)">详情</el-button>
        
      </template>
    </el-table-column>
          </el-table>
 
 
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="page"
       :page-sizes="[3,6,8,20]"
       :page-size="limit"
       layout="total, sizes, prev, pager, next, jumper"
       :total="count">
     </el-pagination>
     <el-divider content-position="left">
 <span>此页</span>
</el-divider>
     <span>此页订单:{{ this.count1 }}</span>
      
 <span style="margin-left: 30px;">交易商品数量:{{ this.hao1 }}</span>
 <span style="margin-left: 30px;">交易金额:{{ this.hao|currency}}</span>
 <el-divider content-position="left">
 <span>总共</span>
</el-divider>
<span>订单数量:{{ this.bb.length }}</span>
      
      <span style="margin-left: 30px;">交易商品数量:{{ this.hao3 }}</span>
      <span style="margin-left: 30px;">交易金额:{{ this.hao2|currency}}</span>
      <span style="margin-left: 30px;">完成订单:{{ this.bb1.length}}</span>
      <span style="margin-left: 30px;">取消订单:{{ this.bb2.length}}</span>
     </div>
 
 </template>
 
 <script type="module">
 import xinq from './xinq.vue'
 import basePath from '../../plugins/base'
import { ColorPicker } from 'element-ui'
import Vue from 'vue';
  Vue.filter('currency', function(value) {
  if (typeof value !== 'number') {
    return value;
  }
  // 这里以人民币为例，你可以根据需要修改货币符号和格式
  return  value.toFixed(2)+'￥';
});
 export default {
     name:'user',
     data(){
         return {
           content:{},
             pder:[],
            
             name:"",
             page:1,
             limit:3,
             count:0,            
             baseImg:'',
             multipleSelection: [],
             shuju:[],
             dialogFormVisible1:false,
             dd:[],
             count1:0,
             bb:[],
             bb1:[],
             bb2:[],
             pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
       
        value2: ''
            ,
            sjy:['2023-01-01','2026-10-10'] 
         }
        
     },
     methods: {
      
       search(){
         this.axios({
      method:'get',
      url:'Pder/Pderfen',
      params:{page:this.page,limit:this.limit,name:this.name ,sj1:this.sjy[0],sj2:this.sjy[1]},
     }).then(res=>{
        this.pder=res.data
       
        console.log(this.pder1)
        this.count=res.count
       this.count1=this.pder.length
     }).catch(error=>{
         console.log('error: ', error);
     })
    },

     cha(){
         this.axios({
      method:'get',
      url:'Pderxq',
      params:{},
     }).then(res=>{
      this.shuju=res.data
       console.log(res.data)
     }).catch(error=>{
         console.log('error: ', error);
     })
       },
       cha1(){
         this.axios({
      method:'POST',
      url:'Pder/Pdermain',
      params:{},
     }).then(res=>{
      this.bb=res.data
      this.bb=this.bb.filter(n=>n.zt>3)
      this.bb1=this.bb.filter(n=>n.zt>3&&n.zt<5)
      this.bb2=this.bb.filter(n=>n.zt>4)
     }).catch(error=>{
         console.log('error: ', error);
     })
       }
       ,
       sc(id){
             this.axios({
                 method:'delete',
                 url:'User',
                 params:{id:id}
             }).then(res=>{
                 if(res.code>0){
                   this.$message({ type:'success', message:res.msg})
                  this.search();
                 }else{
                   this.$message({ type:'danger', message:res.msg})
                 }
             })
         },
         handleSizeChange(val) {
        
         this.limit=val
         this.search()
       },
       handleCurrentChange(val) {
         this.page=val
         this.search()
       }, 
       handleSelectionChange(val) {
         this.multipleSelection = val;
         console.log('val: ', val);
       },dels(){
         const ids=[];
         const names=[];
         this.multipleSelection.forEach(zhi=>{
           ids.push(zhi.UserID)
           names.push(zhi.UserName)
         })
         if(ids.length==0){
           this.$message({type:"danger",message:"请选择要删除的行"})
       
           return;
 
         }
         this.$confirm('你确定要删除'+names+'?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
          this.axios({
           method:"delete",
           url:"User/Dels",
           data:ids
          }).then(res=>{
           if(res.code==1){
             this.$message({type:"success",message:res.msg})
            this.search();
           }else{
             this.$message({type:"danger",message:res.msg})
           }
          })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });          
         });
    
       },
       xg(res){
        //console.log(res)
       // alert(JSON.stringify(res))
        this.dd=JSON.parse(JSON.stringify(res))
        this.dialogFormVisible1=true;
       },
       /* ceshi(){
        this.axios({
                 method:'POST',
                 url:'Pder',
                 data:this.zz
             }).then(res=>{
                 if(res.code>0){
                  alert("成功")
                   this.$message({ type:'success', message:res.msg})
                  
                 }else{
                  console.log(this.zz)
                  alert("失败")
                   this.$message({ type:'danger', message:res.msg})
                 }
             })
       } */
       cx(){
       
        this.sjy[0]=this.value2[0]
        this.sjy[1]=this.value2[1]
        this.search();
       }
     },computed:{
      hao(){
        return this.pder.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Price,0);
        //return this.shuju.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Price*product.Shu,0);
      },
      hao1(){
        console.log(this.pder)
        console.log(this.value2)
        //return this.pder.pxq.reduce((sum,product)=>sum+product.Shu,0);
         return this.pder.filter(n=>n.zt>3&&n.zt<5).flatMap(order=>order.pxq).reduce((sum,product)=>sum+product.Shu,0);
        //return this.shuju.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Shu,0);
      },
      hao2(){
        //return this.pder.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Price,0);
        return this.shuju.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Price*product.Shu,0);
      },
      hao3(){
       
        
         //return this.pder.flatMap(order=>order.pxq).reduce((sum,product)=>sum+product.Shu,0);
        return this.shuju.filter(n=>n.zt>3&&n.zt<5).reduce((sum,product)=>sum+product.Shu,0);
      }
     }
     ,filters:{
      zz(value){
        return value+'.00￥'
      }
    }
     ,
     created(){
      this.search();
      this.cha();
      this.cha1();
      this.baseImg = basePath.imgUrl;
    
     },components:{xinq}
    
     
 }
 </script>
 
 <style scoped>
 </style>